const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webPackCommonConf = require('./webpack.common')
const { merge } = require('webpack-merge')
const { srcPath, distPath } = require('./path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 抽离css
const TerserJSPlugin = require('terser-webpack-plugin') // 压缩JS
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') // 压缩css

module.exports = merge(webPackCommonConf, {
  mode: 'production',
  output: {
    path: distPath,
    filename: '[name].[contenthash:8].js',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader', // 生成图片base64
            options: {
              // 小于 8kb 的图片用 base64 格式产出，否则依然沿用 file-loader 的形式，产出 url
              limit: 8 * 1024,
              outputPath: '/img/',
            },
          },
        ],
      },
      // 抽离css
      {
        test: /\.(css)$/i,
        // 注意，这里不再用style-loader
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      // 抽离less
      {
        test: /\.(less)$/i,
        // 注意，这里不再用style-loader
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(), // 会默认清空output里面的文件夹
    // DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用
    // 配置环境变量
    new webpack.DefinePlugin({
      ENV: JSON.stringify('production'),
    }),
    new MiniCssExtractPlugin({
      filename: 'css/main.[contenthash:8].css', // 生成的压缩后的css文件名
    }),
  ],
  optimization: {
    // 压缩JS和CSS
    // 压缩CSS，JS默认是会压缩的，但是配置了minimizer说明要手动配置压缩选项，那就不会默认压缩JS了，此时要主动压缩JS
    minimizer: [new TerserJSPlugin({}), new MiniCssExtractPlugin()],
  },
})
